<template>
  <div class="index_main">
			<div class="btnBox">
					<el-button type="primary" @click="addAdvertising">新增广告链接</el-button>
			</div>
			<div class="phone_box">
					<div class="header_img">
						<img src="@/static/ly_top.png" alt="" />
            <div class="tixing"></div>
					</div>
					<div class="ph_main">
							<div class="banner" @click="addBanner">
                <el-carousel height="150px">
                  <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                      <img  class="bannerImg" :src="item.imgUrl" alt="">
                  </el-carousel-item>
                </el-carousel>
							</div>
							<div class="advertising_box">
                <draggable v-model="advertisementList" sort= "false"  chosenClass="chosen" forceFallback="true" group="advertising" animation="1000" @start="onAdvertiStart" @end="onAdvertiEnd">
                  <transition-group>
                    <!-- <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div> -->
                    <div v-for="(item) in advertisementList" :key="item.id">
                      <div class="threeBox" v-if="item.advertiseType == 3">
                          <div class="tou">
                            <div class="box"></div>
                            <div class="btn_list">
                              <div class="status">
                                <span v-if="item.isShow == 2">已隐藏</span>
                                <span v-if="item.isShow == 1">显示</span>
                              </div>
                              <el-button size="small" type="primary" icon="el-icon-edit" @click="editAdverti(item.id)"></el-button>
                              <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteAdverti(item.id)"></el-button>
                            </div>
                          </div>
                          <div class="big_m" style="margin-right: 14px">
                              <img :src="item.bannerList[0].imgUrl" alt="">
                          </div>
                          <div class="min_m">

                            <img :src="item.bannerList[1].imgUrl" alt="">
                            <img :src="item.bannerList[2].imgUrl" alt="">
                          </div>
                      </div>
                      <div class="threeBox" v-if="item.advertiseType == 4">
                          <div class="tou">
                            <div class="btn_list">
                              <div class="status">
                                <span v-if="item.isShow == 2">已隐藏</span>
                                <span v-if="item.isShow == 1">显示</span>
                              </div>
                              <el-button size="small" type="primary" icon="el-icon-edit" @click="editAdverti(item.id)"></el-button>
                              <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteAdverti(item.id)"></el-button>
                            </div>
                            <div class="box"></div>
                          </div>
                          <div class="min_m">
                            <img :src="item.bannerList[1].imgUrl" alt="">
                            <img :src="item.bannerList[2].imgUrl" alt="">
                          </div>
                          <div class="big_m" style="margin-left: 14px">
                            <img :src="item.bannerList[0].imgUrl" alt="">
                          </div>
                      </div>
                      <div class="twoBox" v-if="item.advertiseType == 2">
                        <div class="tou">
                          <div class="btn_list">
                            <div class="status">
                              <span v-if="item.isShow == 2">已隐藏</span>
                              <span v-if="item.isShow == 1">显示</span>
                            </div>
                            <el-button size="small" type="primary" icon="el-icon-edit" @click="editAdverti(item.id)"></el-button>
                            <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteAdverti(item.id)"></el-button>
                          </div>
                          <div class="box"></div>
                        </div>
                        <div class="kong" v-for="(aitem) in item.bannerList" :key="aitem.id">
                            <img :src="aitem.imgUrl" alt="">
                        </div>
                      </div>
                      <div class="oneBox" v-if="item.advertiseType == 1 ">
                        <div class="tou">
                          <div class="btn_list">
                            <div class="status">
                              <span v-if="item.isShow == 2">已隐藏</span>
                              <span v-if="item.isShow == 1">显示</span>
                            </div>
                            <el-button size="small" type="primary" icon="el-icon-edit" @click="editAdverti(item.id)"></el-button>
                            <el-button size="small" type="primary" icon="el-icon-delete" @click="deleteAdverti(item.id)"></el-button>
                          </div>
                          <div class="box"></div>
                        </div>
                        <div class="imgBox" v-for="(aitem) in item.bannerList" :key="aitem.id" >
                          <img :src="aitem.imgUrl" alt="">
                        </div>
                      </div>
                    </div>
                  </transition-group>
                </draggable> 
							</div>
					</div>
          <div class="card_box">
              <img src="@/static/ly_card.png" alt="">
          </div>
			</div>
      <banner-diglog
        v-if="bannerDiglog"
        :id="id"
        :pathType="bannerPath"
        :visible.sync="bannerDiglog"
        @success="_handleSuccess" 
      />
      <advertising-diglog
        v-if="advertisingDiglog"
        :id="AdvertiId"
        :pathType="advertisingPath"
        :visible.sync="advertisingDiglog"
        @success="_handleSuccess" 
      />
  </div>
</template>
<script>
import {
  bannerList,
  advertisementList,
  deleteAdvertisement,
  punchActivityList,
  editPunchActivitySort,
  editAdvertisementSort,
} from '@/api/incentiveManagement/adConfigNew'
import bannerDiglog from '../components/paradise_main/bannerDiglog' 
import advertisingDiglog from '../components/paradise_main/advertisingDiglog' 
import draggable from 'vuedraggable' //拖动组件

export default {
  name: "shopDetail",
  components: {
    bannerDiglog,
    advertisingDiglog,
    draggable
  },
  props: {
  },
  data() {
    return {
        bannerDiglog: false,
        advertisingDiglog: false,
        chestDiglog: false,
        bannerPath: 'add', 
        advertisingPath: 'add',
        id: '',
        bannerList: [],//轮播图列表
        advertisementList: [],//广告链接列表
        AdvertiId: '',//广告链接ID
    };
  },
  watch: {
    
  },
  created() {
    this.getbannerList()
    this.getAdvertisList()
  },
  mounted() {
  
  },
  methods: {
    //获取轮播图
    getbannerList(){
      bannerList(2).then((res) => {
        this.bannerList = res.result
      })
    },
    //获取广告列表
    getAdvertisList(){
      advertisementList(2).then(res => {
        this.advertisementList = res.result
      })
    },
    //添加轮播图
    addBanner(){
      this.bannerDiglog = true
      if(this.bannerList.length > 0){
        this.bannerPath = 'edit'
      }else{
        this.bannerPath = 'add'
      }
    },
    //新增广告链接
    addAdvertising(){
      this.advertisingDiglog = true
      this.advertisingPath = 'add'
    },
    //编辑广告链接
    editAdverti(id){
      this.advertisingDiglog = true
      this.advertisingPath = 'edit'
      this.AdvertiId = id
    },
    //删除广告链接
    deleteAdverti(id){
      this.$confirm("你确定要删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteAdvertisement(id)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "删除成功",
                type: 'success',
                duration: 1500,
              });
              setTimeout(()=>{
                  this.getAdvertisList();
              },1000)
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
      
    },
    _handleSuccess(){
      this.getbannerList()
      this.getAdvertisList()
    },
    //开始拖拽事件
    onAdvertiStart(){
      this.drag=true;
    },
    //拖拽结束事件
    onAdvertiEnd() {
      this.drag=false;
      var list = []
      this.advertisementList.forEach(item => {
        list.push(item.id)
      })
      editAdvertisementSort(list).then(res => {

      })
    },
  },
};
</script>
<style lang="scss" scoped>
.phone_box{
	width: 395px;
	min-height: 1000px;
	border-radius: 30px;
	border: 10px solid #333;
	margin: 40px 200px 0 100px;
	background: #fff;
	box-sizing: border-box;
}
.tixing{
  position: absolute;
  top: 0;
  left: 116px;
  width:145px;
  height: 0;            
  border-radius: 2px;
  border-top: 20px solid #333;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
.header_img{
	width: 100%;
	position: relative;
	img{
		width: 100%;
		border-top-left-radius : 30px;
		border-top-right-radius : 30px;
	}
}
.ph_main{
	padding: 10px 0;
	.banner{
		width: calc(100% - 28px);
		height: 150px;
		border-radius: 10px;
		background: #333;
		color: #fff;
		margin: 0 14px;
	}
  .bannerImg{
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}
.advertising_box{
	margin-top: 8px;
	padding: 0 14px;
	.tou{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: none;
    z-index: 99;
		.box{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #000;
			opacity: 0.4;
			z-index: 1;
      img{
        width: 100%;
        height: 100%;
      }
		}
		.btn_list{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 14px;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
    .status{
      position: absolute;
      top: 8px;
      left: 8px;
      span{
        color: #fff;
      }
    }
	}
	.threeBox{
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-bottom: 10px;
		.big_m{
			flex: 1;
			height: 180px;
			border-radius: 8px;
			background: #f6f6f6;
      img{
        width: 100%;
        height: 180px;
        border-radius: 8px;
      }
		}
		.min_m{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
      img{
        width: 100%;
        height: 85px;
        border-radius: 8px;
      }
		}
	}
	.threeBox:hover .tou{
		display: block;
	}
	.twoBox:hover .tou{
		display: block;
	}
	.oneBox:hover .tou{
		display: block;
	}
	.twoBox{
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		position: relative;
		.kong{
			width: 48%;
			height: 85px;
			border-radius: 8px;
			background: #f6f6f6;
      img{
        width: 100%;
        height: 85px;
        border-radius: 10px;
      }
		}
	}
	.oneBox{
		margin-bottom: 10px;
		width: 100%;
		height: 85px;
		border-radius: 8px;
		background: #f6f6f6;
		position: relative;
    .imgBox{
      border-radius: 10px;
      img{
        width: 100%;
        height: 85px;
        border-radius: 10px;
      }
    }

    
	}
}
.card_box{
  width: 100%;
  img{
    width: 100%;
  }
}
</style>
